import React from 'react';
import {  Layout, Menu, theme, MenuProps } from 'antd';
import { DesktopOutlined, PieChartOutlined, TeamOutlined, UserOutlined, BarChartOutlined} from '@ant-design/icons';
import { Link } from 'react-router-dom';

type MenuItem = Required<MenuProps>['items'][number];

const boxStyle: React.CSSProperties = {
  width: '100%',
  height: 120,
  borderRadius: 6,
  border: '1px solid #40a9ff',
};
const { Header, Content, Footer, Sider } = Layout;

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

// 导航栏部分
function Navhead({ defaultSelectedKey }: { defaultSelectedKey: string }) {
  //定义导航栏各类名称
  const items: MenuItem[] = [
    getItem(<Link to='/Support_Standards_1'>主页</Link>, '1', <DesktopOutlined />),
    getItem(<Link to='/Support_item_personlsit'>人员</Link>, '2', <UserOutlined />),
    getItem(<Link to='/Support_item_equipmentlist'>设备</Link>, '3', <BarChartOutlined />),
    getItem(<Link to='/Support_item_processlist'>规程</Link>, '4', <TeamOutlined />),
    getItem(<Link to='/Support_item_samplelist'>样品</Link>, '5', <PieChartOutlined />),
  ];
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <>
      <Sider width={200} style={{ background: colorBgContainer }}>
        <Menu
          mode="inline"
          defaultSelectedKeys={[defaultSelectedKey]}
          defaultOpenKeys={['sub1']}
          style={{ height: '100%', borderRight: 0 }}
          items={items}
        />
      </Sider>
    </>


  )
}

const Nav: React.FC <{ defaultSelectedKey: string }>= ({ defaultSelectedKey }) => {

  return (
    <Navhead defaultSelectedKey={defaultSelectedKey}/>
  );
};

export default Nav;